<template>
    <div class="addAddress">
        <IHeader class="header" back="true" title="编辑地址" save="true" @doSave="saveAddress"></IHeader>
        <div class="wrap">
            <div class="inputRows">
                <div class="input">
                    <div class="left">
                        <text class="rowtext">收货人</text>
                        <input type="text" class="rowInput" placeholder="请输入收货人姓名" v-model="name">
                    </div>
                    <image :src="imgPath('lianxiren.png')" class="rowImg"></image>
                </div>
            </div>
            <div class="inputRows">
                <div class="input">
                    <div class="left">
                        <text class="rowtext">联系方式</text>
                        <input type="text" class="rowInput" placeholder="请输入联系方式" v-model="phone">
                    </div>
                    <image :src="imgPath('lianxidianhua.png')" class="rowImg"></image>
                </div>
            </div>
            <div class="inputRows" v-if="showNo" @click="handleSelectArea">
                <div class="input"  >
                    <div class="left">
                        <text class="rowtext">所在地区</text>
                    </div>
                    <div class="left">
                        <text class="choose">请选择</text>
                        <image :src="imgPath('arrow_right.png')" class="arrowImg"></image>
                    </div>
                </div>
            </div>
            <div class="inputRows" v-if="showYes" @click="handleSelectArea">
                <div class="input" >
                    <div class="left">
                        <text class="rowtext">所在地区</text>
                        <text class="addstr">{{str}}</text>
                    </div>
                    <image :src="imgPath('arrow_right.png')" class="arrowImg"></image>
                </div>
            </div>
            <div class="inputRows">
                <div class="input">
                    <div class="left">
                        <text class="rowtext">详细地址</text>
                        <input type="text" class="addInput" placeholder="请输入详细的的地址信息" v-model="address">
                    </div>
                </div>
            </div>
            <div class="setting">
                <Check class="margin_right_16" :show="editing" :checked="shoucang" @doclick="chooseMoren"></Check>
                <!--<image :src="imgPath( shoucang? 'nochoose.png': 'checked.png')" class="morenImg" @click="chooseMoren"></image>-->
                <text class="morentext">设置默认地址</text>
            </div>
        </div>
        <Address :show="addressShow" @cancel="handleAddressCancel" @confirm="handleAddressConfirm"></Address>
    </div>
</template>

<script>
import Check from '@/components/check'
import Address from '@/components/address'
import {addAddress} from '@/api/order'
// const modal = weex.requireModule('modal')
export default {
  name: 'addAddress',
  data () {
    return {
      addressShow: false, // 地址选择显示
      showNo: true,
      showYes: false,
      str: '', // 地区数据
      addressData: {},
      shoucang: true,
      stringList: [],
      idList: [],
      name: '',
      phone: '',
      address: '',
      provinceId: '',
      cityId: '',
      districtId: '',
      provinceName: '',
      cityName: '',
      districtName: ''
    }
  },
  methods: {
    handleSelectArea () { // 选择地区
      this.addressShow = true
    },
    handleAddressCancel () { // 取消
      this.addressShow = false
      this.showNo = true
      this.showYes = false
    },
    handleAddressConfirm (obj) { // 确定
      const that = this
      that.addressShow = false
      that.showNo = false
      that.showYes = true
      that.str = obj.str
      that.stringList = that.str.trim().split(/\s+/)
      that.idList = obj.val.trim().split(/\s+/)
      that.provinceId = that.idList[0]
      that.cityId = that.cityId[1]
      that.districtId = that.districtId[2]
      that.provinceName = that.stringList[0]
      that.cityName = that.stringList[1]
      that.districtName = that.stringList[2]
    },
    chooseMoren () {
      const that = this
      if (that.shoucang) {
        that.shoucang = false
      } else {
        that.shoucang = true
      }
    },
    deleteAddress () {
      // const that = this
      // that.$api.post(deleteAddress + '/' + that.addressData.id, {}, function (res) {
      // })
    },
    backPage () {
      this.$router.push('/account/myAddress')
    },
    saveAddress () {
      const that = this
      if (that.shoucang) {
        const canshu = {
          consignee: that.name,
          phone: that.phone,
          address: that.address,
          provinceId: that.provinceId,
          cityId: that.cityId,
          districtId: that.districtId,
          provinceName: that.provinceName,
          cityName: that.cityName,
          districtName: that.districtName,
          openDefaultAddress: 0,
          userId: 8
        }
        that.$api.post(addAddress, canshu, function (res) {
          that.$router.push('/account/myAddress')
        })
      } else {
        const canshu = {
          consignee: that.name,
          phone: that.phone,
          address: that.address,
          provinceId: that.provinceId,
          cityId: that.cityId,
          districtId: that.districtId,
          provinceName: that.provinceName,
          cityName: that.cityName,
          districtName: that.districtName,
          openDefaultAddress: 1,
          userId: 8
        }
        that.$api.post(addAddress, canshu, function (res) {
          that.$router.push('/account/myAddress')
        })
      }
    }
  },
  components: {
    Address,
    Check
  }
}
</script>

<style scoped>
    .wrap{
        margin-top: 88px;
    }
    .inputRows{
        height: 88px;
        padding-left: 24px;
        padding-right: 24px;
        background-color: #Fff;
    }
    .input{
        flex-direction: row;
        height: 87px;
        border-bottom-style: solid;
        border-bottom-color: rgb(245,245,245);
        border-bottom-width: 1px;
        width: 702px;
        justify-content: space-between;
        align-items: center;
        color:rgb(70,70,70)
    }
    .rowtext{
        font-weight:bold;
        color:rgb(134,134,134);
        font-size:28px;
        width: 130px;
        height: 88px;
        line-height: 90px;
    }
    .rowImg{
        width:40px;
        height:40px;
    }
    .left{
        flex-direction: row;
        align-items: center;
    }
    .rowInput{
        font-size:28px;
        font-family:regular;
        margin-left:20px;
        width:350px;
        font-weight:bold;
    }
    .arrowImg{
        width: 24px;
        height:36px;
    }
    .choose{
        font-size:28px;
        color:rgb(206,206,206);
        margin-right: 20px;
    }
    .addInput{
        width: 570px;
        font-size:28px;
        font-weight:bold;
    }
    .setting{
        padding-left: 24px;
        flex-direction: row;
        margin-top:40px;
        align-items:center
    }
    .margin_right_16 {
        margin-right: 16px;
    }
    .morentext{
        font-size:28px;
        color:rgb(70,70,70);
        font-weight:bold;
    }
    .addstr{
        color:rgb(70,70,70);
        font-weight:bold;
        font-size:28px;
    }
    .delete{
        margin-top: 100px;
        justify-content: center;
        flex-direction:row;
    }
    .delete-btn{
        width:565px;
        height:70px;
        border-width:1px;
        border-style:solid;
        border-color:rgb(43,48,64);
        border-radius: 10px;
        line-height:70px;
        text-align:center;
        color:rgb(43,48,64);
        font-size: 26px;
        font-family:medium
    }
    .col_fff {
        color: #fff;
    }
    .col_cecece {
        color: #cecece;
    }
    .regular {
        font-family: regular;
    }
    .medium {
        font-family: medium;
    }
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: wrap;
        flex-direction: row;
        height: 88px;
        background-image: linear-gradient(to right, #2b3040, #7d88a4);
    }
    .backPage {
        width: 200px;
        flex-direction: row;
        align-items: center;
        padding-right: 8px;
        padding-left: 24px;
    }
    .arrow_left {
        width: 24px;
        height: 40px;
        margin-right: 16px;
    }
    .back {
        font-size: 32px;
        line-height: 88px;
    }
    .title {
        width: 350px;
        text-align: center;
        font-size: 36px;
        font-weight: bold;
        line-height: 88px;
    }
    .settle {
        height: 44px;
        padding-left: 16px;
        padding-right: 16px;
        font-size: 28px;
        line-height: 44px;
        background-color: rgba(33, 38, 50, .22);
        border-radius: 22px;
    }
    .btn-wrapper {
        width: 200px;
        padding-right: 24px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
    }
    .btn{
        text-align: right;
        line-height: 88px;
        font-size: 32px;
        color: #cecece;
        font-family: medium;
    }
</style>
